<template>
  <div class="main-content">
    <el-tabs v-model="editableTabsValue"
             type="card"
             border
             style="width:100%;">
      <el-tab-pane label="调度列表"
                   name="list">
        <div style="display: flex;justify-content: space-between;">
          <div>
            <el-button-group>
              <el-button icon="el-icon-circle-plus"
                         type="primary" @click="handleShowQuartzVis()">
                新增调度
              </el-button>
              <el-button icon="el-icon-remove"
                         @click="delQuartz()">删除
              </el-button>
              <el-button icon="el-icon-video-play"
                         type="primary" @click="allStart()">
                批量启动
              </el-button>
              <el-button icon="el-icon-video-pause"
                         type="primary" @click="allStop()">
                批量停止
              </el-button>
              <el-button icon="el-icon-refresh"
                         @click="loadData()">刷新
              </el-button>
            </el-button-group>
          </div>
          <div>
            <el-input placeholder="请输入关键字"
                      v-model="searchKeys"
                      class="input-with-select"
                      @keyup.enter.native="loadData()">
              <el-button slot="append"
                         icon="el-icon-search"
                         @click="loadData()"></el-button>
            </el-input>
          </div>
        </div>
        <el-table ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55">
          </el-table-column>
          <el-table-column v-for="(item,index) in tablesHeader"
                           :key="index"
                           :prop="item.prop"
                           :label="item.label"
                           :width="item.width"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="状态"
                           align="center"
                           width="80">
            <template slot-scope="scope">
              <el-button :type="getStatusType(scope.row.status)"
                         size="small">{{getStatusValue(scope.row.status)}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="执行频率"
                           align="center"
                           width="120">
            <template slot-scope="scope">
              <el-button :type="getExpressionType(scope.row.expressionId)"
                         size="small">{{getExpressionValue(scope.row.expressionId)}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           align="center"
                           width="260">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status==0" plain class="el-button el-button--success"
                         size="small"
                         @click="start(scope.row.id)">启动
              </el-button>
              <el-button plain class="el-button el-button--primary" size="small"
                         @click="modifyQuartz(scope.row)">修改
              </el-button>
              <el-button v-if="scope.row.status==1" plain class="el-button el-button--info"
                         size="small"
                         @click="stop(scope.row.id)"
              >停止
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;display: flex;justify-content: flex-end">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="page"
                         :page-size="limit"
                         layout="total,prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增调度表单对话框-->
    <el-dialog title="新增调度" :visible.sync="quartzVis"
               width="50%"
               append-to-body
               :before-close="handleCloseQuartzVis">
      <el-form :model="quartzForm"
               :rules="rules"
               ref="quartzForm"
               label-width="140px"
               style="padding:10px ;margin:20px 0"
               class="demo-quartzForm">
        <el-form-item style="display:none"
                      label="隐藏字段"
                      prop="id">
          <el-input v-model="quartzForm.id"
                    placeholder="隐藏字段"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="调度ID"
          prop="quartzId">
          <el-input v-model="quartzForm.quartzId"
                    placeholder="调度ID"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item label="调度名称"
                      prop="name">
          <el-input v-model="quartzForm.name"
                    placeholder="调度名称"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="调度类型"
          prop="type">
          <el-select v-model="quartzForm.type"
                     placeholder="请选择">
            <el-option label="ORACLE"
                       value="oracle"></el-option>
            <el-option label="MYSQL"
                       value="mysql"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="执行时间规则"
          prop="expressionId">
          <el-select v-model="quartzForm.expressionId"
                     placeholder="请选择">
            <el-option label="ORACLE"
                       value="oracle"></el-option>
            <el-option label="MYSQL"
                       value="mysql"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="执行的API地址"
          prop="quartzApiUrl">
          <el-input v-model="quartzForm.quartzApiUrl"
                    placeholder="执行的API地址"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="执行方法"
          prop="quartzBean">
          <el-input v-model="quartzForm.quartzBean"
                    placeholder="执行方法"
                    size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="执行参数"
          prop="params">
          <el-input v-model="quartzForm.params"
                    placeholder="执行参数"
                    size="small"></el-input>
        </el-form-item>
      </el-form>
      <div class="footer"
           style="text-align: center">
        <el-button @click="handleCloseQuartzVis">取消</el-button>
        <el-button type="primary"
                   @click="addORUpdateQuartz">确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "quartzlist",
    components: {},
    data() {
      return {
        page: 1,
        limit: 10,
        total: 0,
        searchKeys: '', // 搜索内容
        editableTabsValue: 'list',
        quartzVis: false,
        quartzInsertORUpdateURL: '/quartz/insert',
        editableTabs: [],
        tabIndex: 1,
        tableData: [],
        multipleSelection: [],
        tablesHeader:
          [
            {
              prop: 'quartzId',
              label: '调度ID',
              width: '220'
            },
            {
              prop: 'name',
              label: '调度名称',
              width: '220'
            },
            {
              prop: 'type',
              label: '调度类型',
              width: ''
            },
            {
              prop: 'creater',
              label: '创建人',
              width: ''
            }
          ],
        quartzForm:
          {
            id: '',
            name: '',
            quartzId: '',
            type: '',
            quartzApiUrl: '',
            expressionId: '',
            quartzBean: '',
            params: '',
            status: 0
          },
        rules: {
          quartzId: {required: true, message: '调度ID不能为空', trigger: 'blur'},
          type: {required: true, message: '类型不能为空', trigger: 'blur'},
          expressionId: {required: true, message: '执行时间规则不能为空', trigger: 'blur'},
          name: {required: true, message: '调度名称不能为空', trigger: 'blur'}
        }
      }
    },
    methods: {
      // 默认加载数据
      async loadData() {
        let params = {
          current: this.page,
          size: this.limit,
          searchKeys: this.searchKeys
        }
        let url = '/quartz/page'
        let _res = await this.utils.loadData(this, url, params);
        this.utils.showCallBackMessage(this, _res, 0, true, false, true)
        if (_res && _res.errcode === 0) {
          this.tableData = _res.data.records
          this.page = _res.data.current
          this.limit = _res.data.size
          this.total = _res.data.total
        } else {
          this.tableData = []
          this.page = 1
          this.limit = 10
          this.total = 0
        }
      },
      // 分页属性
      handleSizeChange(val) {
        this.limit = val
        this.loadData()
      },
      handleCurrentChange(val) {
        this.current = val
        this.loadData()
      },
      // 表单选择
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 表单显示
      handleShowQuartzVis() {
        this.quartzVis = true
      },
      handleCloseQuartzVis() {
        this.quartzVis = false
        this.$refs.quartzForm.resetFields()
        this.quartzForm =
          {
            id: '',
            name: '',
            quartzId: '',
            type: '',
            quartzApiUrl: '',
            expressionId: '',
            quartzBean: '',
            params: '',
            status: 0
          }
      },
      getStatusType(_value) {
        if (_value === 1) {
          return 'success'
        } else if (_value === 0) {
          return 'error'
        } else {
          return 'info'
        }
      }
      ,
      getStatusValue(_value) {
        if (_value === 1) {
          return '执行中'
        } else if (_value === 0) {
          return '未启动'
        } else {
          return '未启动'
        }
      },
      getExpressionType(_value) {
        return 'success'
      },
      getExpressionValue(_value) {
        return '每天一次'
      },
      // 修改
      modifyQuartz(_row) {
        this.quartzInsertORUpdateURL = '/quartz/update'
        this.quartzForm = _row
        this.handleShowQuartzVis()
      },
      // 新增或修改方法
      async addORUpdateQuartz() {
        let _params = this.quartzForm;
        this.$refs.quartzForm.validate(async (valid) => {
          if (!valid) {
            return;
          }
          let _res = await this.utils.post(this, this.quartzInsertORUpdateURL, _params,
            true)
          this.utils.showCallBackMessage(this, _res, 0, true, true, true)
          if (_res.errcode == 0 || _res.errcode == 200) {
            this.handleCloseQuartzVis()
            this.loadData()
          }
        })
      },
      // 删除调度
      delQuartz() {
        let data = []
        let selectRows = this.multipleSelection
        if (selectRows.length === 0) {
          this.utils.showMessage(this, 'error', '请选择一行数据')
          return false
        }
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del(selectRows)
        }).catch(() => {
          this.utils.showMessage(this, 'info', '已取消删除')
        })
      },
      // 删除
      async del(_selectRows) {
        _selectRows.forEach(row => {
          if (row.status == 1) {
            this.utils.showMessage(this, 'error', row.name + '已启动的调度不能删除,停止调度后删除!')
            return false
          } else {
            data.push(row.id)
          }
        })
        if (data.length === 0) {
          return false
        }
        data.join()
        let _url = '/quartz/delete'
        let _params = data
        let _res = await this.utils.post(this, _url, _params, true)
        this.utils.showCallBackMessage(this, _res, 0, _res.data == true, true, true)
        this.loadData()
      },
      // 批量启动
      allStart() {
        let data = []
        let selectRows = this.multipleSelection
        if (selectRows.length === 0) {
          this.utils.showMessage(this, 'error', '请选择一行数据')
          return false
        }
        this.$confirm('此操作将批量启动调度, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          selectRows.forEach(row => {
            data.push(row.id)
          })
          data.join()
          this.start(data.toString())
        }).catch(() => {
          this.utils.showMessage(this, 'info', '已取消批量启动调度')
        })
      },
      // 启动调度
      async start(_id) {
        let _url = '/quartz/startquartz'
        let _params = {id: _id}
        let _res = await this.utils.get(this, _url, _params, true)
        this.utils.showCallBackMessage(this, _res, 0, _res.data == true, true, true)
        this.loadData()
      },
      // 批量停止
      allStop() {
        let data = []
        let selectRows = this.multipleSelection
        if (selectRows.length === 0) {
          this.utils.showMessage(this, 'error', '请选择一行数据')
          return false
        }
        this.$confirm('此操作将批量停止调度, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          selectRows.forEach(row => {
            data.push(row.id)
          })
          data.join()
          this.stop(data.toString())
        }).catch(() => {
          this.utils.showMessage(this, 'info', '已取消批量停止调度')
        })

      },
      // 停止调度
      async stop(_id) {
        let _url = '/quartz/stopquartz'
        let _params = {id: _id}
        let _res = await this.utils.get(this, _url, _params, true)
        this.utils.showCallBackMessage(this, _res, 0, _res.data == true, true, true)
        this.loadData()
      }
    },
    created() {
      this.loadData()
    }
  }
</script>

<style scoped>

</style>
